<template>
	<view style="padding-top: 100upx;">
		<cu-custom bgColor="bg-gradual-green" :isBack="false">
			<view slot="backText">返回</view>
			<view slot="content">校园易活动</view>
		</cu-custom>
		<search-bar></search-bar>
		<view class="cu-modal" :class="modal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">近期活动提醒</view>
					<view class="action" @click="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view v-for="(item, index) in recentActivityList" :key="index" class="padding-xl">
					您的活动{{item.title}}将于{{item.time}}举办, 距离今日已不足3天, 请注意时间安排哦!
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green " @click="toActivityTimeLine">
						<text class="cuIcon-remind"></text>我的日程安排
					</view>
					<!-- <view class="action margin-0 flex-sub text-green solid-left" @click="hideModal">取消</view> -->
					<view class="action margin-0 flex-sub text-green solid-left" @click="hideModal">确定</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="srco"
			:style="[{height:'calc(100vh - 100rpx - env(safe-area-inset-bottom) / 2 - '+ CustomBar + 'px - 100rpx)'}]"
			:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="activityLoad">
			<view class="cu-bar bg-white" @click="showModal">
				<view class="action sub-title">
					<text class="text-xl text-bold text-green">功能模块</text>
					<text class="bg-green" style="width:4rem"></text>
				</view>
			</view>
			<view class="cu-list grid col-3">
				<view class="cu-item" @click="toCategory(1)">
					<view class="cuIcon-camera text-green"></view>
					<text>文体活动</text>
				</view>
				<view class="cu-item" @click="toCategory(2)">
					<view class="cuIcon-read text-green"></view>
					<text>学术竞赛</text>
				</view>
				<view class="cu-item" @click="toCategory(3)">
					<view class="cuIcon-service text-green"></view>
					<text>大咖讲座</text>
				</view>
				<view class="cu-item" @click="toCategory(4)">
					<view class="cuIcon-service text-green"></view>
					<text>其它</text>
				</view>
			</view>
			<view class="cu-bar bg-white">
				<view class="action sub-title">
					<text class="text-xl text-bold text-green">最近活动</text>
					<text class="bg-green" style="width:4rem"></text>
				</view>
			</view>
			<view class="cu-card article" v-for="(item, index) in activityList" :key="item.id">
				<view class="cu-item shadow" style="border: 2upx solid lightgray;" @click="activityClick(item.id)">
					<view class="title justify-between flex">
						<view class="text-cut">{{item.title}}</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-attentionfill margin-lr-xs text-green"></text>{{item.view}}
							<text class="cuIcon-messagefill margin-lr-xs text-green"></text>{{item.comment}}
							<text class="cuIcon-hotfill margin-lr-xs text-green"></text>{{item.hot}}
						</view>
					</view>
					<view class="content">
						<image :src="url + '/image/' + item.photo" mode="aspectFill">
						</image>
						<view class="desc">
							<view class="text-content">{{item.content}}</view>
							<view>
								<view class="cu-tag bg-red light sm round" style="font-family: 'TsangerYuYangT W03';">
									{{item.time}}
								</view>
								<view class="cu-tag bg-green light sm round" style="font-family: 'TsangerYuYangT W03';">
									{{item.place}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white justify-center">
				<view class="action">
					<text class="cuIcon-pullup text-green"></text>
					<text>没有更多了哦</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import searchBar from '../../components/searchBar/searchBar.vue';
	import {
		mapState
	} from 'vuex';
	// #ifndef MP-WEIXIN
	import axios from 'axios';
	// #endif
	export default {
		name: 'home',
		components: {
			'search-bar': searchBar
		},
		data() {
			return {
				url: this.url,
				CustomBar: this.CustomBar,
				activityList: [],
				// 	{
				// 	id: 0,
				// 	title: '金秋艺术节',
				// 	content: '一年一度的金秋艺术节等你来参加, 名额有限, 速来报名!',
				// 	time: '09-18-09:00',
				// 	place: '梅园操场',
				// 	category: '文体活动',
				// 	view: 0,
				// 	comment: 0,
				// 	hot: 0,
				// 	imgList: [
				// 		'https://tse3-mm.cn.bing.net/th/id/OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK?pid=ImgDet&rs=1',
				// 		'https://ts1.cn.mm.bing.net/th/id/R-C.e09c9ac88d6a159bcdafbb98b96c451d?rik=SAD5AFJYGB6qRg&riu=http%3a%2f%2fwww.2qqtouxiang.com%2fpic%2fTP4545_04.jpg&ehk=RSDt%2foDClYGXoARgxoyuakHTbDGuWLlxiMeKoGOVQKs%3d&risl=&pid=ImgRaw&r=0'
				// 	]
				// }, {
				// 	id: 1,
				// 	title: '清泉计划',
				// 	content: '在亲近大自然的过程中学会更多环境保护的知识!',
				// 	time: '10-25-15:00',
				// 	place: '教五102',
				// 	category: '讲座',
				// 	view: 0,
				// 	comment: 0,
				// 	hot: 0,
				// 	imgList: [
				// 		'https://pic3.zhimg.com/v2-c6ae9c3aff36b9b221258f6a90577902_r.jpg',
				// 		'https://www.haoy99.com/FileUpload/2019-02/Shui1Zhu11i1Pao1pptB-173234_109.jpg'
				// 	]
				// },
				currentPage: 1,
				pageSize: 10,
				modal: false,
				recentActivityList: []
			}
		},
		computed: {
			...mapState(['userInfo']),
			numOfActivities() {
				return this.activityList.length
			}
		},
		methods: {
			activityClick(id) {
				uni.navigateTo({
					url: '/pages/activityDetail/activityDetail?id=' + id
				})
			},
			activityLoad() {
				uni.showLoading({
					title: '加载数据中...'
				})
				uni.request({
					method: 'GET',
					url: this.url + '/home',
					data: {
						pageNum: this.currentPage,
						pageSize: this.pageSize
					},
					success: (res) => {
						if (res.statusCode == 200) {
							this.activityList = this.activityList.concat(res.data.records || [])
							this.currentPage++
						}
					},
					complete: (res) => {
						uni.hideLoading()
					}
				})
			},
			showModal() {
				this.modal = true
			},
			hideModal() {
				this.modal = false
			},
			toActivityTimeLine() {
				this.hideModal()
				uni.navigateTo({
					url: '/pages/activityTimeLine/activityTimeLine'
				})
			},
			toCategory(index) {
				uni.navigateTo({
					url: '/pages/activityCategory/activityCategory?id=' + index
				})
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载数据中...'
			})
			uni.request({
				method: 'GET',
				url: this.url + '/home',
				data: {
					pageNum: this.currentPage,
					pageSize: this.pageSize
				},
				success: (res) => {
					console.log(res)
					if (res.statusCode == 200) {
						this.activityList = res.data.records
						this.currentPage++
					} else {
						console.log('loadError')
					}
				},
				complete: (res) => {
					uni.hideLoading()
				}
			})
			if (this.userInfo.userName != '') {
				uni.request({
					method: 'GET',
					url: this.url + '/tip',
					data: {
						userId: this.userInfo.userId
					},
					header: {
						Authorization: 'Bearer ' + this.userInfo.token
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							this.recentActivityList = res.data
							this.modal = res.data.length > 0
						}
					}
				})
			}

		}
	}
</script>

<style scoped>
	.goTop {
		position: fixed;
		z-index: 1;
		bottom: 400upx;
		/* background: rgba(0, 0, 0, .3); */
		right: 30upx;
		border-radius: 50%;
	}

	.srco {
		position: relative;
	}

	/* 	.title {
		font-size: 40upx;
		font-weight: 700;
		font-family: 'TsangerYuYangT W03';
	}

	.content {
		font-size: 28upx;
		font-family: 'TsangerYuYangT W03';
	}

	.side {
		font-size: 24upx;
		font-family: 'TsangerYuYangT W03';
	} */

	.img {
		width: 240upx;
		height: 6.4em;
		margin-right: 20upx;
		border-radius: 6upx;
	}
</style>
